import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primaryColor: Colors.red),
      home: Scaffold(
        appBar: AppBar(title: const Text('Flutter app')),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final List<Widget> tempList;
  MyHomePage({super.key})
    : tempList = listData.map((e) {
        return Container(
          alignment: Alignment.center,
          decoration: const BoxDecoration(color: Colors.blue),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Expanded(child: Image.network(e['imageUrl'], fit: BoxFit.cover, scale: 1.0)),
              SizedBox(height: 10),
              Text(
                e['title'],
                style: const TextStyle(fontSize: 18, color: Colors.white),
              ),
              Text(e['author'], style: const TextStyle(fontSize: 16, color: Colors.white70)),
            ],
          ),
        );
      }).toList();

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 2, // 横轴元素个数
      crossAxisSpacing: 10, // 横轴间距
      mainAxisSpacing: 10, // 纵轴间距
      childAspectRatio: 1, // 宽高比
      padding: EdgeInsets.all(10), // 内边距
      children: tempList,
    );
  }
}

List listData = [
  {
    "title": 'Candy Shop',
    "author": 'Mohamed Chahin',
    "imageUrl":
        "https://tse3-mm.cn.bing.net/th/id/OIP-C.FYx55PIoNajL-lEV5UhFlAHaNK?rs=1&pid=ImgDetMain",
  },
  {
    "title": 'Candy Shop2',
    "author": 'Mohamed Chahin',
    "imageUrl":
        "https://tse3-mm.cn.bing.net/th/id/OIP-C.FYx55PIoNajL-lEV5UhFlAHaNK?rs=1&pid=ImgDetMain",
  },
  {
    "title": 'Candy Shop3',
    "author": 'Mohamed Chahin',
    "imageUrl":
        "https://tse3-mm.cn.bing.net/th/id/OIP-C.FYx55PIoNajL-lEV5UhFlAHaNK?rs=1&pid=ImgDetMain",
  },
  {
    "title": 'Candy Shop4',
    "author": 'Mohamed Chahin',
    "imageUrl":
        "https://tse3-mm.cn.bing.net/th/id/OIP-C.FYx55PIoNajL-lEV5UhFlAHaNK?rs=1&pid=ImgDetMain",
  },
];
